<template>
    <div>
        <h1 style="text-align: center;">地图</h1>
        <div>
            <div id="map"></div>
        </div>
    </div>
</template>

<script>
import *as echarts from 'echarts'
import china from '@/geo/china.json'
import axios from 'axios'

export default {
    data () {
        return {
            item:{}
        }
    },
    methods: {
        GetNum(){
            axios('https://api.i-lynn.cn/college').then(data => {
                // console.log(data);
                let arr = data.data.list.sort((obj1,obj2) => {
                    return obj2.counts - obj1.counts
                })
                // console.log(arr);
                this.item = {
                    selected: true,
                    name: arr[0].area
                }
                const myChart = echarts.init(document.querySelector('#map'))
                echarts.registerMap('china', china)
                let option ={
                    geo: {
                        map:'china',
                        zoom:1.2,
                        label:{
                            show:true
                        },
                        regions: [
                            {
                                ...this.item
                            }
                        ],
                        emphasis: {
                            disabled:false,
                            itemStyle: {
                                areaColor: '#f00'
                            }
                        }
                    }
                }
                myChart.setOption(option)
            })
        }
    },
    created() {
        this.GetNum()
    }
}
</script>

<style lang="scss" scoped>
    #map{
        width: 800px;
        height: 700px;
    }
</style>
